<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>

<body>
  <div class="ml1-MatchLiveSoccerModule_PitchContainer ">
    <div class="ml1-SoccerClock ">
      <div class="ml1-SoccerClock_TimerOuterWrapper ">
        <div class="ml1-SoccerClock_Timer ">
          <div class="ml1-SoccerClock_TimerInnerWrapper ml1-SoccerClock_TimerInnerWrapper-show ">
            <span class="ml1-SoccerClock_Clock ">69:58</span>
          </div>
          <span
            class="ml1-SoccerClock_InjuryTime ml1-SoccerClock_Timer-empty ml1-SoccerClock_InjuryTimeFadeOut "></span>
        </div>
      </div>
    </div>
    <div class="ml1-MatchLiveSoccerModule_SVGPitchContainer ">
      <svg class="ml1-MatchLiveSoccerModule_PitchSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180"
        version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <defs>
          <!-- This is where the colours get pumped when the possession changes -->
          <linearGradient id="ml1-Gradient1">
            <stop class="gradStart" offset="10%" style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53);"></stop>
            <stop class="gradEnd" offset="100%" style="stop-opacity: 0.4; stop-color: rgb(24, 57, 36);"></stop>
          </linearGradient>
          <linearGradient id="ml1-Gradient2">
            <stop class="gradStart" offset="0%" style="stop-opacity: 0.4; stop-color: rgb(24, 57, 36);"></stop>
            <stop class="gradEnd" offset="65.3%" style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53);"></stop>
          </linearGradient>
          <linearGradient id="ml1-SolidTeamColour">
            <stop id="ml1-SolidTeam1" offset="0%" stop-color="#FFDF1B"></stop>
            <stop id="ml1-SolidTeam2" offset="100%" stop-color="#FFDF1B"></stop>
          </linearGradient>
        </defs>
        <g id="pitch" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path fill="#222" d="M0 0h400v180h-400z"></path>
          <rect id="pitch-BG" fill="#35713D" x="0" y="0" width="400" height="180"></rect>
          <rect id="18-yard-away" stroke="#3D8246" stroke-width="2" x="348" y="44" width="51" height="93"></rect>
          <rect id="18-yard-home" stroke="#3D8246" stroke-width="2" x="1" y="44" width="51" height="93"></rect>
          <path d="M199,3 L199,178 L199,179 L201,179 L201,178 L201,3 L201,2 L199,2 L199,3 L199,3 Z" id="Shape"
            fill="#3D8246"></path>
          <path
            d="M200,118 L200,118 C215.463973,118 228,105.463973 228,90 C228,74.536027 215.463973,62 200,62 C184.536027,62 172,74.536027 172,90 C172,105.463973 184.536027,118 200,118 L200,118 Z M200,120 L200,120 C183.431458,120 170,106.568542 170,90 C170,73.4314575 183.431458,60 200,60 C216.568542,60 230,73.4314575 230,90 C230,106.568542 216.568542,120 200,120 L200,120 Z"
            id="Shape-Copy" fill="#3D8246"></path>
          <circle id="Oval-344" fill="#3D8246" cx="200" cy="90" r="6"></circle>
          <path d="M74,63 C65.5522257,68.9666814 60,79.0570309 60,90.5 C60,101.942969 65.5522257,112.033319 74,118"
            id="d-left" stroke="#3D8246" stroke-width="2"
            transform="translate(67.000000, 90.500000) scale(-1, 1) translate(-59.000000, -90.500000) "></path>
          <circle id="Oval-70" fill="#3D8246" cx="34" cy="90" r="3"></circle>
          <path
            d="M1,11 C6.5228475,11 11,6.5228475 11,1 L9.046875,1 C9.046875,5.44416635 5.44416635,9.046875 1,9.046875 L1,11 L1,11 Z"
            id="Shape" fill="#3D8246"></path>
          <path d="M1,171 C5.418278,171 9,174.581722 9,179 L11,179 C11,173.477153 6.5228475,169 1,169 L1,171 L1,171 Z"
            id="Shape" fill="#3D8246"></path>
          <path
            d="M337.884236,62 C328.64831,68.2472191 323,78.6467666 323,90 C323,101.353233 328.64831,111.752781 337.884236,118 L339,116.354082 C330.305144,110.472845 324.989964,100.686649 324.989964,90 C324.989964,79.3133507 330.305144,69.5271551 339,63.645918 L337.884236,62 L337.884236,62 Z"
            transform="translate(9,0)" id="Shape-Copy-2" fill="#3D8246"></path>
          <rect id="6-yard-home" stroke="#3D8246" stroke-width="2" x="1" y="69" width="16" height="41"></rect>
          <path d="M399,69 L383,69 L383,110 L399,110 L399,69 L399,69 Z" id="6-yard-away" stroke="#3D8246"
            stroke-width="2" sketch:type="MSShapeGroup"></path>
          <circle id="Oval-70" fill="#3D8246" cx="365" cy="90" r="3"></circle>
          <path
            d="M399,9.046875 C394.555834,9.046875 390.953125,5.44416635 390.953125,1 L389,1 C389,6.5228475 393.477153,11 399,11 L399,9.046875 L399,9.046875 Z"
            id="Shape" fill="#3D8246"></path>
          <path
            d="M399,169 C393.477153,169 389,173.477153 389,179 L391,179 C391,174.581722 394.581722,171 399,171 L399,169 L399,169 Z"
            id="Shape" fill="#3D8246"></path>
          <rect stroke="#3D8246" stroke-width="2" x="1" y="1" width="398" height="178"></rect>
        </g>
        <path class="ml1-SoccerPitch_AnimationElement" id="ml1-Possession1" opacity="1"
          d="M2,2 199.1,2 199.1,2 C199.1,1.4 199.1,28 199.1,28 C199.1,29 199.1,30 199.1,31 L199.1,61 L199.1,88 C199.1,89 199.1,90 199.1,91 L199.1,121 L199.1,146 C199.1,147 199.1,150 199.1,151 L199.1,178 C199.1,178 2.0,178 2.0,178 L2,2 Z"
          fill="url(#ml1-Gradient1)"></path>
        <path class="ml1-SoccerPitch_AnimationElement" id="ml1-Possession2"
          d="M398,2 132.03710743801653,2 131.4305785123967,2 C131.4305785123967,1 119.90652892561985,28 119.90652892561985,28 C119.30000000000001,29 119.30000000000001,30 119.90652892561985,31 L131.4305785123967,61 L119.90652892561985,88 C119.30000000000001,89 119.30000000000001,90 119.90652892561985,91 L131.4305785123967,121 L119.90652892561985,146 C119.30000000000001,147 119.30000000000001,150 119.30000000000001,151 L131.4305785123967,178 C131.4305785123967,178 398.0,178 398.0,178 L398,2 Z"
          fill="url(#ml1-Gradient2)" opacity="0"></path>
        <!--球门球-->
        <g class="ml1-SoccerPitch_AnimationElement" id="ml1-WideKickRadial" opacity="0">
          <path id="ml1-WideKickRadialOuter" fill="#165031"
            d="M94.703,73.698C110.554,53.359,120,27.784,120,0c0-27.764-9.433-53.321-25.262-73.653L0,0.036L94.703,73.698z"
            style="opacity: 0;"></path>
          <path id="ml1-WideKickRadialCentre" fill="#165031"
            d="M62.325,48.514C72.765,35.123,79,18.294,79,0c0-18.274-6.222-35.085-16.639-48.469L0,0.036L62.325,48.514z"
            style="opacity: 0;"></path>
          <path id="ml1-WideKickRadialInner" fill="#165031"
            d="M30.759,23.961C35.918,17.349,39,9.037,39,0c0-9.017-3.068-17.311-8.205-23.917L0,0.036L30.759,23.961z"
            style="opacity: 0;"></path>
        </g>
        <!--角球-->
        <g class="ml1-SoccerPitch_AnimationElement" id="ml1-NarrowKickRadial" opacity="0">
          <path id="ml1-NarrowKickRadialOuter" fill="#165031"
            d="M0.031,0.013l117.647,45.045C123.041,31.064,126,15.881,126,0s-2.959-31.065-8.322-45.059L0.093-0.036L0.031,0.013z"
            style="opacity: 0;"></path>
          <path id="ml1-NarrowKickRadialCentre" fill="#165031"
            d="M0.031,0.013l77.43,29.647c3.536-9.21,5.488-19.204,5.488-29.66s-1.952-20.45-5.487-29.66L0.093-0.036L0.031,0.013z"
            style="opacity: 0;"></path>
          <path id="ml1-NarrowKickRadialInner" fill="#165031"
            d="M0.031,0.013l38.208,14.629c1.746-4.546,2.71-9.48,2.71-14.642s-0.964-10.096-2.709-14.642L0.093-0.036L0.031,0.013z"
            style="opacity: 0;"></path>
        </g>
        <!--边线球-->
        <g class="ml1-SoccerPitch_AnimationElement" id="ml1-ThrowRadial" opacity="1"
          transform="translate(100, 0) rotate(90)">
          <path id="ml1-ThrowRadialOuter" fill="#165031"
            d="M53.033,53.068c29.289-29.289,29.289-76.777,0-106.066L0,0.035L53.033,53.068z" class=""
            style="opacity: 0.22; transform: scaleX(1) scaleY(1);"></path>
          <path id="ml1-ThrowRadialInner" fill="#165031"
            d="M26.517,26.552c14.646-14.645,14.644-38.39,0-53.033L0,0.035L26.517,26.552z" class=""
            style="opacity: 0.66; transform: scaleX(1) scaleY(1);"></path>
        </g>
      </svg>
    </div>
    <div>
      <div class="ml1-MatchLiveSoccerModule_AnimWrapper ">
        <div class="ml1-AnimatedTextBar ">
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H1TextWrapper"
            style="opacity: 1; display: block; text-align: right; left: 6px; top: 70.5px; width: 180px;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H1Text ">亞的斯 亞貝巴 Ketema</span>
          </div>
          <div
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H1TextBackupWrapper ml1-CommonAnimations_H1TextBackup"
            style="display: block; opacity: 0; top: 120.5px; width: 180px; text-align: left; left: 88px;">
            <span class="ml1-AnimatedTextBar ">Jimma Aba Buna</span>
          </div>
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H1TextGhostWrapper "
            style="display: none; width: 180px; text-align: right;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H1TextGhost ">亞的斯 亞貝巴 Ketema</span>
          </div>
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H2TextWrapper"
            style="opacity: 1; display: block; text-align: right; left: 6px; top: 88px; width: 180px;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H2Text ">控球</span>
          </div>
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H2TextBackupWrapper"
            style="display: block; opacity: 0; top: 138px; width: 180px; text-align: left; left: 88px;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H2TextBackup ">危險進攻</span>
          </div>
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H2TextGhostWrapper "
            style="display: none; width: 180px; text-align: right;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H2TextGhost ">控球</span>
          </div>
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H3TextWrapper"
            style="display: none; opacity: 0;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H3Text "></span>
          </div>
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H3TextBackupWrapper "
            style="display: none;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H3TextBackup "></span>
          </div>
          <div class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H3TextGhostWrapper "
            style="display: none;">
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H3TextGhost "></span>
          </div>
          <div class="ml1-CommonAnimations_Line"
            style="opacity: 1; background-color: rgb(196, 0, 16); left: 191px; top: 72px; height: 39px; transform: rotateZ(0deg);">
          </div>
        </div>
        <div class="ml1-PossessionHistoryCanvas ">
          <svg class="ml1-PossessionHistoryCanvas_Canvas "></svg>
        </div>
        <div class="ml1-XYBlob_PassDestination " style="left: 384px; top: 72px;">
          <div class="ml1-XYBlob_PassDestinationOuter ">
            <div class="ml1-XYBlob_PassDestinationInner "></div>
          </div>
        </div>
        <div class="ml1-XYBlob ml1-XYBlob_Static "
          style="opacity: 1; left: 100px; top: 0; transform: none; transition: none 0s ease 0s;">
          <div class="ml1-XYBlob_Inner1 " style="border: 2px solid rgb(103, 159, 234);"></div>
          <div class="ml1-XYBlob_Inner2 " style="background-color: rgb(103, 159, 234);"></div>
          <div class="ml1-XYBlob_Inner3 "></div>
        </div>
        <div></div>
        <div id="ml1-ShotBase" style="display: none">
          <div class="ml1-CommonAnimations_Asset ml1-CommonAnimations_Icon ml1-ShotBase_Goal2"
            style="display: block; opacity: 1; left: 340px; top: 75.5px; transform: scaleX(1);">
          </div>
          <div class="ml1-CommonAnimations_Asset ml1-CommonAnimations_Icon ml1-ShotBase_ShotOffTarget"
            style="display: block; left: 343px; top: 77.5px; opacity: 1; transform: scaleX(1);">
          </div>
        </div>
      </div>
    </div>
  </div>


  <script>
    // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
    $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
    $('.ml1-CommonAnimations_Line').css('opacity', 0);

    // $('.ml1-CommonAnimations_H1TextWrapper').css('left', 72);
    $('.ml1-CommonAnimations_H2TextWrapper').css('left', 132);
    $('.ml1-CommonAnimations_Line').css('left', 317);

    // <stop class="gradStart" offset="43.8%" style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53);"></stop>
    // <stop class="gradEnd" offset="100%" style="stop-opacity: 0.4; stop-color: rgb(79, 41, 26);"></stop>

    $('#ml1-Gradient1 .gradStart').attr('offset', '43.8%');
    $('#ml1-Gradient1 .gradStart').attr('style', 'stop-opacity: 0.4; stop-color: rgb(24, 84, 53);');

    $('#ml1-Gradient1 .gradEnd').attr('offset', '100%');
    $('#ml1-Gradient1 .gradEnd').attr('style', 'stop-opacity: 0.4; stop-color: rgb(79, 41, 26);');


    $('.ml1-CommonAnimations_H2Text').text('危险进攻');
    anime({
      targets: '#ml1-Possession1',
      d: 'M2,2 321.04462809917356,2 321.91239669421486,2 C321.91239669421486,1.4 338.40000000000003,28 338.40000000000003,28 C339.26776859504133,29 339.26776859504133,30 338.40000000000003,31 L321.91239669421486,61 L338.40000000000003,88 C339.26776859504133,89 339.26776859504133,90 338.40000000000003,91 L321.91239669421486,121 L338.40000000000003,146 C339.26776859504133,147 339.26776859504133,150 338.40000000000003,151 L321.91239669421486,178 C321.91239669421486,178 2.0,178 2.0,178 L2,2 Z',
      easing: 'easeInQuad',
      duration: 500,
      // delay: 3000
    });

    anime({
      targets: ['.ml1-CommonAnimations_H1TextWrapper'],
      // opacity: [0, 1],
      left: 132,
      easing: 'easeInQuad',
      duration: 500,
    });

    anime({
      targets: ['.ml1-CommonAnimations_H2TextWrapper', '.ml1-CommonAnimations_Line'],
      opacity: [0, 1],
      // left: 72,
      easing: 'easeInQuad',
      duration: 500,
    });
  </script>

  <!-- <script>
      // anime({
      //   targets: ['#ml1-ThrowRadialOuter', '#ml1-ThrowRadialInner'],
      //   scaleX: [0, 1],
      //   scaleY: [0, 1],
      //   duration: 1300,
      //   direction: 'alternate',
      //   easing: 'linear',
      //   loop: true
      // });

      anime.timeline({
          loop: true
        })
        .add({
          targets: ['#ml1-ThrowRadialOuter', '#ml1-ThrowRadialInner'],
          scaleX: [0, 1],
          scaleY: [0, 1],
          duration: 1000,
          easing: 'linear'
        })
        .add({
          targets: ['#ml1-ThrowRadialOuter', '#ml1-ThrowRadialInner'],
          opacity: 0,
          duration: 1000,
          easing: 'linear'
        });

      setTimeout(() => {
        // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
        $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
        $('.ml1-CommonAnimations_Line').css('opacity', 0);

        // $('.ml1-CommonAnimations_H1TextWrapper').css('left', 72);
        $('.ml1-CommonAnimations_H2TextWrapper').css('left', 72);
        $('.ml1-CommonAnimations_Line').css('left', 257);



        $('.ml1-CommonAnimations_H2Text').text('进攻');
        anime({
          targets: '#ml1-Possession1',
          d: 'M2,2 266.799173553719,2 267.39421487603306,2 C267.39421487603306,1.4 278.7,28 278.7,28 C279.29504132231403,29 279.29504132231403,30 278.7,31 L267.39421487603306,61 L278.7,88 C279.29504132231403,89 279.29504132231403,90 278.7,91 L267.39421487603306,121 L278.7,146 C279.29504132231403,147 279.29504132231403,150 278.7,151 L267.39421487603306,178 C267.39421487603306,178 2.0,178 2.0,178 L2,2 Z',
          easing: 'easeInQuad',
          duration: 500,
          // delay: 3000
        });

        anime({
          targets: ['.ml1-CommonAnimations_H1TextWrapper'],
          // opacity: [0, 1],
          left: 72,
          easing: 'easeInQuad',
          duration: 500,
        });

        anime({
          targets: ['.ml1-CommonAnimations_H2TextWrapper', '.ml1-CommonAnimations_Line'],
          opacity: [0, 1],
          // left: 72,
          easing: 'easeInQuad',
          duration: 500,
        });

      }, 3000);

      setTimeout(() => {
        // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
        $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
        $('.ml1-CommonAnimations_Line').css('opacity', 0);

        // $('.ml1-CommonAnimations_H1TextWrapper').css('left', 72);
        $('.ml1-CommonAnimations_H2TextWrapper').css('left', 132);
        $('.ml1-CommonAnimations_Line').css('left', 317);

        // <stop class="gradStart" offset="43.8%" style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53);"></stop>
        // <stop class="gradEnd" offset="100%" style="stop-opacity: 0.4; stop-color: rgb(79, 41, 26);"></stop>

        $('#ml1-Gradient1 .gradStart').attr('offset', '43.8%');
        $('#ml1-Gradient1 .gradStart').attr('style', 'stop-opacity: 0.4; stop-color: rgb(24, 84, 53);');

        $('#ml1-Gradient1 .gradEnd').attr('offset', '100%');
        $('#ml1-Gradient1 .gradEnd').attr('style', 'stop-opacity: 0.4; stop-color: rgb(79, 41, 26);');


        $('.ml1-CommonAnimations_H2Text').text('危险进攻');
        anime({
          targets: '#ml1-Possession1',
          d: 'M2,2 321.04462809917356,2 321.91239669421486,2 C321.91239669421486,1.4 338.40000000000003,28 338.40000000000003,28 C339.26776859504133,29 339.26776859504133,30 338.40000000000003,31 L321.91239669421486,61 L338.40000000000003,88 C339.26776859504133,89 339.26776859504133,90 338.40000000000003,91 L321.91239669421486,121 L338.40000000000003,146 C339.26776859504133,147 339.26776859504133,150 338.40000000000003,151 L321.91239669421486,178 C321.91239669421486,178 2.0,178 2.0,178 L2,2 Z',
          easing: 'easeInQuad',
          duration: 500,
          // delay: 3000
        });

        anime({
          targets: ['.ml1-CommonAnimations_H1TextWrapper'],
          // opacity: [0, 1],
          left: 132,
          easing: 'easeInQuad',
          duration: 500,
        });

        anime({
          targets: ['.ml1-CommonAnimations_H2TextWrapper', '.ml1-CommonAnimations_Line'],
          opacity: [0, 1],
          // left: 72,
          easing: 'easeInQuad',
          duration: 500,
        });

      }, 6000);

      setTimeout(() => {
        $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
        $('#ml1-ShotBase').attr('style', 'display: block');

        anime({
          targets: ['.ml1-ShotBase_ShotOffTarget'],
          left: [330, 345],
          easing: 'easeInQuad',
          duration: 500,
        });

        anime({
          targets: ['.ml1-CommonAnimations_H2TextWrapper'],
          opacity: [0, 1],
          easing: 'easeInQuad',
          duration: 500,
        });

        anime({
          targets: ['#ml1-Possession1'],
          opacity: [1, 0],
          // left: 72,
          easing: 'easeInQuad',
          duration: 500,
        });
        $('.ml1-CommonAnimations_H2Text').text('正中靶心');
      }, 8000);

      // 完场
      setTimeout(() => {
        clearInterval(countdownInterval);
        $('.ml1-SoccerClock_Clock').text('00:00');

        $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
        $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
        $('.ml1-CommonAnimations_Line').css('opacity', 0);
        $('#ml1-ShotBase').attr('style', 'display: none');

        $('.ml1-CommonAnimations_H2Text').text('完场');
        $('.ml1-CommonAnimations_H2TextWrapper').attr('style',
          'opacity: 1; display: block; text-align: center; left: 40px; top: 79px; width: 320px;');
      }, 11000);

      //$(document).ready(function() {
      var timeString = $('.ml1-SoccerClock_Clock').text();
      var timeArray = timeString.split(':');
      var minutes = parseInt(timeArray[0]);
      var seconds = parseInt(timeArray[1]);
      var totalTime = minutes * 60 + seconds;

      var countdownInterval = setInterval(function () {
        if (totalTime <= 0) {
          clearInterval(countdownInterval);
          $('.ml1-SoccerClock_Clock').text('00:00');
        } else {
          minutes = Math.floor(totalTime / 60);
          seconds = totalTime % 60;
          $('.ml1-SoccerClock_Clock').text(minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(
            2, '0'));
          totalTime--;
        }
      }, 1000);
      //});
    </script> -->
</body>

</html>